<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=748272" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">iconfont-5</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">打印</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">错误</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">垃圾箱</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">收货地址</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">提示</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">完成</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">我的订单</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">向上箭头</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">向下箭头</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">向右箭头</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">向左箭头</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">眼睛</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">意见反馈</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">正确</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">消息中心</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c3;</span>
                <div class="name">验证码</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe883;</span>
                <div class="name">01运输中、物流</div>
                <div class="code-name">&amp;#xe883;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe884;</span>
                <div class="name">02包裹、发货</div>
                <div class="code-name">&amp;#xe884;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe885;</span>
                <div class="name">03拆包裹、取件-线性</div>
                <div class="code-name">&amp;#xe885;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe886;</span>
                <div class="name">04自提柜</div>
                <div class="code-name">&amp;#xe886;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88d;</span>
                <div class="name">10仓库、仓储-线性</div>
                <div class="code-name">&amp;#xe88d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe891;</span>
                <div class="name">14签收、审批通过-线性</div>
                <div class="code-name">&amp;#xe891;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe893;</span>
                <div class="name">16寄件、发送-线性</div>
                <div class="code-name">&amp;#xe893;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe895;</span>
                <div class="name">19结算-线性</div>
                <div class="code-name">&amp;#xe895;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89a;</span>
                <div class="name">25单据-线性</div>
                <div class="code-name">&amp;#xe89a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89f;</span>
                <div class="name">28体积、空间</div>
                <div class="code-name">&amp;#xe89f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a1;</span>
                <div class="name">30应用程序</div>
                <div class="code-name">&amp;#xe8a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a4;</span>
                <div class="name">33资源-线性</div>
                <div class="code-name">&amp;#xe8a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ae;</span>
                <div class="name">43财务</div>
                <div class="code-name">&amp;#xe8ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b9;</span>
                <div class="name">204首页-线性</div>
                <div class="code-name">&amp;#xe8b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ba;</span>
                <div class="name">206搜索</div>
                <div class="code-name">&amp;#xe8ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bc;</span>
                <div class="name">209电话-线性圆框</div>
                <div class="code-name">&amp;#xe8bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bf;</span>
                <div class="name">210信-线性</div>
                <div class="code-name">&amp;#xe8bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c2;</span>
                <div class="name">213收藏</div>
                <div class="code-name">&amp;#xe8c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c4;</span>
                <div class="name">217时间-线性</div>
                <div class="code-name">&amp;#xe8c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c8;</span>
                <div class="name">224用户</div>
                <div class="code-name">&amp;#xe8c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c9;</span>
                <div class="name">226角色、群体</div>
                <div class="code-name">&amp;#xe8c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ca;</span>
                <div class="name">225默认头像</div>
                <div class="code-name">&amp;#xe8ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cb;</span>
                <div class="name">227注册、添加好友</div>
                <div class="code-name">&amp;#xe8cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d2;</span>
                <div class="name">238图片-线性</div>
                <div class="code-name">&amp;#xe8d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d7;</span>
                <div class="name">245筛选过滤</div>
                <div class="code-name">&amp;#xe8d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d8;</span>
                <div class="name">246注销、关机</div>
                <div class="code-name">&amp;#xe8d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8dc;</span>
                <div class="name">255Phone手机</div>
                <div class="code-name">&amp;#xe8dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e4;</span>
                <div class="name">303正确、完成-圆框</div>
                <div class="code-name">&amp;#xe8e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e7;</span>
                <div class="name">304错误、关闭、取消-圆框</div>
                <div class="code-name">&amp;#xe8e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e9;</span>
                <div class="name">306问号-圆框</div>
                <div class="code-name">&amp;#xe8e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ea;</span>
                <div class="name">305信息-圆框</div>
                <div class="code-name">&amp;#xe8ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8eb;</span>
                <div class="name">307感叹号-三角框</div>
                <div class="code-name">&amp;#xe8eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ec;</span>
                <div class="name">307感叹号-圆框</div>
                <div class="code-name">&amp;#xe8ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f7;</span>
                <div class="name">319表头-正序</div>
                <div class="code-name">&amp;#xe8f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f8;</span>
                <div class="name">320表头-倒序</div>
                <div class="code-name">&amp;#xe8f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe902;</span>
                <div class="name">407饼图</div>
                <div class="code-name">&amp;#xe902;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe904;</span>
                <div class="name">408条形图-线性</div>
                <div class="code-name">&amp;#xe904;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe906;</span>
                <div class="name">411地图</div>
                <div class="code-name">&amp;#xe906;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe91c;</span>
                <div class="name">257用户资料-线性</div>
                <div class="code-name">&amp;#xe91c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">验证码-登录页</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">基础管理</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">系统基础管理</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">增加的副本</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">减少的副本</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">单选框-已选</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">单选框</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">复选框</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">复选框-已选</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">查看详情</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-iconfont5"></span>
            <div class="name">
              iconfont-5
            </div>
            <div class="code-name">.icon-iconfont5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dayin"></span>
            <div class="name">
              打印
            </div>
            <div class="code-name">.icon-dayin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cuowu"></span>
            <div class="name">
              错误
            </div>
            <div class="code-name">.icon-cuowu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erweima"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon-erweima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lajixiang"></span>
            <div class="name">
              垃圾箱
            </div>
            <div class="code-name">.icon-lajixiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouhuodizhi"></span>
            <div class="name">
              收货地址
            </div>
            <div class="code-name">.icon-shouhuodizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tishi"></span>
            <div class="name">
              提示
            </div>
            <div class="code-name">.icon-tishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wancheng"></span>
            <div class="name">
              完成
            </div>
            <div class="code-name">.icon-wancheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wodedingdan"></span>
            <div class="name">
              我的订单
            </div>
            <div class="code-name">.icon-wodedingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangshangjiantou"></span>
            <div class="name">
              向上箭头
            </div>
            <div class="code-name">.icon-xiangshangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangxiajiantou"></span>
            <div class="name">
              向下箭头
            </div>
            <div class="code-name">.icon-xiangxiajiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangyoujiantou"></span>
            <div class="name">
              向右箭头
            </div>
            <div class="code-name">.icon-xiangyoujiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangzuojiantou"></span>
            <div class="name">
              向左箭头
            </div>
            <div class="code-name">.icon-xiangzuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanjing"></span>
            <div class="name">
              眼睛
            </div>
            <div class="code-name">.icon-yanjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yijianfankui"></span>
            <div class="name">
              意见反馈
            </div>
            <div class="code-name">.icon-yijianfankui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhengque"></span>
            <div class="name">
              正确
            </div>
            <div class="code-name">.icon-zhengque
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxizhongxin"></span>
            <div class="name">
              消息中心
            </div>
            <div class="code-name">.icon-xiaoxizhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanzhengma1"></span>
            <div class="name">
              验证码
            </div>
            <div class="code-name">.icon-yanzhengma1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wode"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-wode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yunshuzhongwuliu"></span>
            <div class="name">
              01运输中、物流
            </div>
            <div class="code-name">.icon-yunshuzhongwuliu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baoguofahuo"></span>
            <div class="name">
              02包裹、发货
            </div>
            <div class="code-name">.icon-baoguofahuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chaibaoguoqujian-xianxing"></span>
            <div class="name">
              03拆包裹、取件-线性
            </div>
            <div class="code-name">.icon-chaibaoguoqujian-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zitigui"></span>
            <div class="name">
              04自提柜
            </div>
            <div class="code-name">.icon-zitigui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cangkucangchu-xianxing"></span>
            <div class="name">
              10仓库、仓储-线性
            </div>
            <div class="code-name">.icon-cangkucangchu-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qianshoushenpitongguo-xianxing"></span>
            <div class="name">
              14签收、审批通过-线性
            </div>
            <div class="code-name">.icon-qianshoushenpitongguo-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jijianfasong-xianxing"></span>
            <div class="name">
              16寄件、发送-线性
            </div>
            <div class="code-name">.icon-jijianfasong-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiesuan-xianxing"></span>
            <div class="name">
              19结算-线性
            </div>
            <div class="code-name">.icon-jiesuan-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danju-xianxing"></span>
            <div class="name">
              25单据-线性
            </div>
            <div class="code-name">.icon-danju-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tijikongjian"></span>
            <div class="name">
              28体积、空间
            </div>
            <div class="code-name">.icon-tijikongjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingyongchengxu"></span>
            <div class="name">
              30应用程序
            </div>
            <div class="code-name">.icon-yingyongchengxu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan-xianxing"></span>
            <div class="name">
              33资源-线性
            </div>
            <div class="code-name">.icon-ziyuan-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caiwu"></span>
            <div class="name">
              43财务
            </div>
            <div class="code-name">.icon-caiwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye-xianxing"></span>
            <div class="name">
              204首页-线性
            </div>
            <div class="code-name">.icon-shouye-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo1"></span>
            <div class="name">
              206搜索
            </div>
            <div class="code-name">.icon-sousuo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianhua-xianxingyuankuang"></span>
            <div class="name">
              209电话-线性圆框
            </div>
            <div class="code-name">.icon-dianhua-xianxingyuankuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xin-xianxing"></span>
            <div class="name">
              210信-线性
            </div>
            <div class="code-name">.icon-xin-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              213收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian-xianxing"></span>
            <div class="name">
              217时间-线性
            </div>
            <div class="code-name">.icon-shijian-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu"></span>
            <div class="name">
              224用户
            </div>
            <div class="code-name">.icon-yonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaosequnti"></span>
            <div class="name">
              226角色、群体
            </div>
            <div class="code-name">.icon-jiaosequnti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-morentouxiang"></span>
            <div class="name">
              225默认头像
            </div>
            <div class="code-name">.icon-morentouxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhucetianjiahaoyou"></span>
            <div class="name">
              227注册、添加好友
            </div>
            <div class="code-name">.icon-zhucetianjiahaoyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian-xianxing"></span>
            <div class="name">
              238图片-线性
            </div>
            <div class="code-name">.icon-tupian-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shaixuanguolv"></span>
            <div class="name">
              245筛选过滤
            </div>
            <div class="code-name">.icon-shaixuanguolv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuxiaoguanji"></span>
            <div class="name">
              246注销、关机
            </div>
            <div class="code-name">.icon-zhuxiaoguanji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Phoneshouji"></span>
            <div class="name">
              255Phone手机
            </div>
            <div class="code-name">.icon-Phoneshouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhengquewancheng-yuankuang"></span>
            <div class="name">
              303正确、完成-圆框
            </div>
            <div class="code-name">.icon-zhengquewancheng-yuankuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cuowuguanbiquxiao-yuankuang"></span>
            <div class="name">
              304错误、关闭、取消-圆框
            </div>
            <div class="code-name">.icon-cuowuguanbiquxiao-yuankuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenhao-yuankuang"></span>
            <div class="name">
              306问号-圆框
            </div>
            <div class="code-name">.icon-wenhao-yuankuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinxi-yuankuang"></span>
            <div class="name">
              305信息-圆框
            </div>
            <div class="code-name">.icon-xinxi-yuankuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gantanhao-sanjiaokuang"></span>
            <div class="name">
              307感叹号-三角框
            </div>
            <div class="code-name">.icon-gantanhao-sanjiaokuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gantanhao-yuankuang"></span>
            <div class="name">
              307感叹号-圆框
            </div>
            <div class="code-name">.icon-gantanhao-yuankuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaotou-zhengxu"></span>
            <div class="name">
              319表头-正序
            </div>
            <div class="code-name">.icon-biaotou-zhengxu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaotou-daoxu"></span>
            <div class="name">
              320表头-倒序
            </div>
            <div class="code-name">.icon-biaotou-daoxu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bingtu"></span>
            <div class="name">
              407饼图
            </div>
            <div class="code-name">.icon-bingtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tiaoxingtu-xianxing"></span>
            <div class="name">
              408条形图-线性
            </div>
            <div class="code-name">.icon-tiaoxingtu-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ditu"></span>
            <div class="name">
              411地图
            </div>
            <div class="code-name">.icon-ditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghuziliao-xianxing"></span>
            <div class="name">
              257用户资料-线性
            </div>
            <div class="code-name">.icon-yonghuziliao-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanzhengma2"></span>
            <div class="name">
              验证码-登录页
            </div>
            <div class="code-name">.icon-yanzhengma2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jichuguanli"></span>
            <div class="name">
              基础管理
            </div>
            <div class="code-name">.icon-jichuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xitongjichuguanli"></span>
            <div class="name">
              系统基础管理
            </div>
            <div class="code-name">.icon-xitongjichuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zengjiadefuben"></span>
            <div class="name">
              增加的副本
            </div>
            <div class="code-name">.icon-zengjiadefuben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo2"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianshaodefuben"></span>
            <div class="name">
              减少的副本
            </div>
            <div class="code-name">.icon-jianshaodefuben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai-copy"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan-copy"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin1"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-radio-checked"></span>
            <div class="name">
              单选框-已选
            </div>
            <div class="code-name">.icon-radio-checked
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-radio"></span>
            <div class="name">
              单选框
            </div>
            <div class="code-name">.icon-radio
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checkbox"></span>
            <div class="name">
              复选框
            </div>
            <div class="code-name">.icon-checkbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checkbox-checked"></span>
            <div class="name">
              复选框-已选
            </div>
            <div class="code-name">.icon-checkbox-checked
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chakanxiangqing"></span>
            <div class="name">
              查看详情
            </div>
            <div class="code-name">.icon-chakanxiangqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfont5"></use>
                </svg>
                <div class="name">iconfont-5</div>
                <div class="code-name">#icon-iconfont5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dayin"></use>
                </svg>
                <div class="name">打印</div>
                <div class="code-name">#icon-dayin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cuowu"></use>
                </svg>
                <div class="name">错误</div>
                <div class="code-name">#icon-cuowu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erweima"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon-erweima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lajixiang"></use>
                </svg>
                <div class="name">垃圾箱</div>
                <div class="code-name">#icon-lajixiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouhuodizhi"></use>
                </svg>
                <div class="name">收货地址</div>
                <div class="code-name">#icon-shouhuodizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tishi"></use>
                </svg>
                <div class="name">提示</div>
                <div class="code-name">#icon-tishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wancheng"></use>
                </svg>
                <div class="name">完成</div>
                <div class="code-name">#icon-wancheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wodedingdan"></use>
                </svg>
                <div class="name">我的订单</div>
                <div class="code-name">#icon-wodedingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangshangjiantou"></use>
                </svg>
                <div class="name">向上箭头</div>
                <div class="code-name">#icon-xiangshangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangxiajiantou"></use>
                </svg>
                <div class="name">向下箭头</div>
                <div class="code-name">#icon-xiangxiajiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangyoujiantou"></use>
                </svg>
                <div class="name">向右箭头</div>
                <div class="code-name">#icon-xiangyoujiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangzuojiantou"></use>
                </svg>
                <div class="name">向左箭头</div>
                <div class="code-name">#icon-xiangzuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanjing"></use>
                </svg>
                <div class="name">眼睛</div>
                <div class="code-name">#icon-yanjing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yijianfankui"></use>
                </svg>
                <div class="name">意见反馈</div>
                <div class="code-name">#icon-yijianfankui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengque"></use>
                </svg>
                <div class="name">正确</div>
                <div class="code-name">#icon-zhengque</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxizhongxin"></use>
                </svg>
                <div class="name">消息中心</div>
                <div class="code-name">#icon-xiaoxizhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanzhengma1"></use>
                </svg>
                <div class="name">验证码</div>
                <div class="code-name">#icon-yanzhengma1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-wode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunshuzhongwuliu"></use>
                </svg>
                <div class="name">01运输中、物流</div>
                <div class="code-name">#icon-yunshuzhongwuliu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baoguofahuo"></use>
                </svg>
                <div class="name">02包裹、发货</div>
                <div class="code-name">#icon-baoguofahuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chaibaoguoqujian-xianxing"></use>
                </svg>
                <div class="name">03拆包裹、取件-线性</div>
                <div class="code-name">#icon-chaibaoguoqujian-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zitigui"></use>
                </svg>
                <div class="name">04自提柜</div>
                <div class="code-name">#icon-zitigui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cangkucangchu-xianxing"></use>
                </svg>
                <div class="name">10仓库、仓储-线性</div>
                <div class="code-name">#icon-cangkucangchu-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianshoushenpitongguo-xianxing"></use>
                </svg>
                <div class="name">14签收、审批通过-线性</div>
                <div class="code-name">#icon-qianshoushenpitongguo-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jijianfasong-xianxing"></use>
                </svg>
                <div class="name">16寄件、发送-线性</div>
                <div class="code-name">#icon-jijianfasong-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiesuan-xianxing"></use>
                </svg>
                <div class="name">19结算-线性</div>
                <div class="code-name">#icon-jiesuan-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danju-xianxing"></use>
                </svg>
                <div class="name">25单据-线性</div>
                <div class="code-name">#icon-danju-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tijikongjian"></use>
                </svg>
                <div class="name">28体积、空间</div>
                <div class="code-name">#icon-tijikongjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingyongchengxu"></use>
                </svg>
                <div class="name">30应用程序</div>
                <div class="code-name">#icon-yingyongchengxu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan-xianxing"></use>
                </svg>
                <div class="name">33资源-线性</div>
                <div class="code-name">#icon-ziyuan-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caiwu"></use>
                </svg>
                <div class="name">43财务</div>
                <div class="code-name">#icon-caiwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye-xianxing"></use>
                </svg>
                <div class="name">204首页-线性</div>
                <div class="code-name">#icon-shouye-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo1"></use>
                </svg>
                <div class="name">206搜索</div>
                <div class="code-name">#icon-sousuo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianhua-xianxingyuankuang"></use>
                </svg>
                <div class="name">209电话-线性圆框</div>
                <div class="code-name">#icon-dianhua-xianxingyuankuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xin-xianxing"></use>
                </svg>
                <div class="name">210信-线性</div>
                <div class="code-name">#icon-xin-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">213收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian-xianxing"></use>
                </svg>
                <div class="name">217时间-线性</div>
                <div class="code-name">#icon-shijian-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu"></use>
                </svg>
                <div class="name">224用户</div>
                <div class="code-name">#icon-yonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaosequnti"></use>
                </svg>
                <div class="name">226角色、群体</div>
                <div class="code-name">#icon-jiaosequnti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-morentouxiang"></use>
                </svg>
                <div class="name">225默认头像</div>
                <div class="code-name">#icon-morentouxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhucetianjiahaoyou"></use>
                </svg>
                <div class="name">227注册、添加好友</div>
                <div class="code-name">#icon-zhucetianjiahaoyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian-xianxing"></use>
                </svg>
                <div class="name">238图片-线性</div>
                <div class="code-name">#icon-tupian-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shaixuanguolv"></use>
                </svg>
                <div class="name">245筛选过滤</div>
                <div class="code-name">#icon-shaixuanguolv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuxiaoguanji"></use>
                </svg>
                <div class="name">246注销、关机</div>
                <div class="code-name">#icon-zhuxiaoguanji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Phoneshouji"></use>
                </svg>
                <div class="name">255Phone手机</div>
                <div class="code-name">#icon-Phoneshouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengquewancheng-yuankuang"></use>
                </svg>
                <div class="name">303正确、完成-圆框</div>
                <div class="code-name">#icon-zhengquewancheng-yuankuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cuowuguanbiquxiao-yuankuang"></use>
                </svg>
                <div class="name">304错误、关闭、取消-圆框</div>
                <div class="code-name">#icon-cuowuguanbiquxiao-yuankuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenhao-yuankuang"></use>
                </svg>
                <div class="name">306问号-圆框</div>
                <div class="code-name">#icon-wenhao-yuankuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinxi-yuankuang"></use>
                </svg>
                <div class="name">305信息-圆框</div>
                <div class="code-name">#icon-xinxi-yuankuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gantanhao-sanjiaokuang"></use>
                </svg>
                <div class="name">307感叹号-三角框</div>
                <div class="code-name">#icon-gantanhao-sanjiaokuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gantanhao-yuankuang"></use>
                </svg>
                <div class="name">307感叹号-圆框</div>
                <div class="code-name">#icon-gantanhao-yuankuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaotou-zhengxu"></use>
                </svg>
                <div class="name">319表头-正序</div>
                <div class="code-name">#icon-biaotou-zhengxu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaotou-daoxu"></use>
                </svg>
                <div class="name">320表头-倒序</div>
                <div class="code-name">#icon-biaotou-daoxu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bingtu"></use>
                </svg>
                <div class="name">407饼图</div>
                <div class="code-name">#icon-bingtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiaoxingtu-xianxing"></use>
                </svg>
                <div class="name">408条形图-线性</div>
                <div class="code-name">#icon-tiaoxingtu-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditu"></use>
                </svg>
                <div class="name">411地图</div>
                <div class="code-name">#icon-ditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghuziliao-xianxing"></use>
                </svg>
                <div class="name">257用户资料-线性</div>
                <div class="code-name">#icon-yonghuziliao-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanzhengma2"></use>
                </svg>
                <div class="name">验证码-登录页</div>
                <div class="code-name">#icon-yanzhengma2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jichuguanli"></use>
                </svg>
                <div class="name">基础管理</div>
                <div class="code-name">#icon-jichuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitongjichuguanli"></use>
                </svg>
                <div class="name">系统基础管理</div>
                <div class="code-name">#icon-xitongjichuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zengjiadefuben"></use>
                </svg>
                <div class="name">增加的副本</div>
                <div class="code-name">#icon-zengjiadefuben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo2"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianshaodefuben"></use>
                </svg>
                <div class="name">减少的副本</div>
                <div class="code-name">#icon-jianshaodefuben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai-copy"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan-copy"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin1"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-radio-checked"></use>
                </svg>
                <div class="name">单选框-已选</div>
                <div class="code-name">#icon-radio-checked</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-radio"></use>
                </svg>
                <div class="name">单选框</div>
                <div class="code-name">#icon-radio</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox"></use>
                </svg>
                <div class="name">复选框</div>
                <div class="code-name">#icon-checkbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-checked"></use>
                </svg>
                <div class="name">复选框-已选</div>
                <div class="code-name">#icon-checkbox-checked</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chakanxiangqing"></use>
                </svg>
                <div class="name">查看详情</div>
                <div class="code-name">#icon-chakanxiangqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
